<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!--    导入自己的css文件-->
    <link rel="stylesheet" href="../css/my-css.css">
    <style>
        .center{
            width: 1200px;
            margin: 0 auto;
        }
        #footer_center {
            margin: 0;
        }
        #footer_center h3{
            color: white;
        }
        body{
            background-color: rgb(241,242,243);
        }
        .el-header{
            background-color: white;
        }

    </style>
</head>
<body>
<div id="app" >
    <el-container>
       <my-header></my-header>
        <el-main class="center" style="width: 1200px; height: 600px; margin: 0 auto;padding-left: 125px">
            <el-row gutter="20">
                <el-col span="4">

                    <el-card style="height: 1200px">
                        <p @click="location.href='../usermodel/personal.html'"  style="margin-bottom: 30px;cursor: pointer">个人信息</p>
                        <p @click="location.href='../usermodel/friendlist.html'"  style="margin-bottom: 30px;cursor: pointer">好友列表</p>
                        <p style="color: #409EFF; margin-bottom: 30px">笔记管理</p>
                        <p @click="location.href='../videomodel/videoManagement.html'"  style="margin-bottom: 30px;cursor: pointer">视频管理</p>
                    </el-card>
                </el-col>

                <el-col span="20">
                    <el-card style="height: 1200px">
                        <el-button type="primary" @click="location.href='postNote.html'">发笔记</el-button>
                        <!--内容列表开始-->
                        <el-table :data="contentArr" border>
                            <el-table-column label="标题" width="150px"
                                prop="title" align="center"></el-table-column>
                            <el-table-column label="封面" width="150px" align="center">
                                <template slot-scope="scope">
                                   <img :src="scope.row.cover" width="50px">
                                </template>
                            </el-table-column>
                            <el-table-column label="学科名"
                                             prop="subjectName" align="center"></el-table-column>
                            <el-table-column label="点击量"
                                             prop="clickCount" align="center"></el-table-column>
                            <el-table-column label="评论量"
                                             prop="contentCount" align="center"></el-table-column>
                            <el-table-column label="点赞量"
                                             prop="upvoteCount" align="center"></el-table-column>
                            <el-table-column label="创建时间" width="300"
                                             prop="createTime" align="center"></el-table-column>
                            <el-table-column label="修改时间" width="300"
                                             prop="updateTime" align="center"></el-table-column>
                            <el-table-column label="操作"  width="200px" fixed="right"
                                             align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="success"
                                               @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger"
                                               @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--内容列表结束-->
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
        <my-footer></my-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!--导入自己的头部js文件-->
<script src="../js/my-header.js"></script>
<!--导入自己的尾部js文件-->
<script src="../js/my-footer.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                contentArr:[{
                    id:'',title:'',cover:'',subjectName:'',clickCount:'',contentCount:'',upvoteCount:'',createTime:'',updateTime:''
                            }]
            }
        },
        methods: {
            handleDelete(i,content){
                // console.log(content)
                if (confirm("你确定删除此内容吗?")) {
                    axios.post("/v1/notes/deleteById/" + content.id).then(function (response) {
                        if (response.data.code == 20000) {
                            v.$message.success("删除完成!");
                            v.contentArr.splice(i, 1);//删除页面中的内容
                        }
                    })
                }
            },
            handleEdit(i,note){
                location.href="/notemodel/postNote.html?id="+note.id;
            },
        },
        created:function () {
            axios.get("/v1/notes/selectContent").then(function (response) {
                if (response.data.code==20000){
                    v.contentArr = response.data.data;
                }else{
                    alert("请先登录!");
                    location.href = "../usermodel/login.html";
                }
            })
        }
    })
</script>
</html>